<template>
  <div>
    <h1>新建资源</h1>
    <el-form
      :model="ruleForm2"
      status-icon
      :rules="rules2"
      ref="ruleForm2"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="患者姓名" prop="name" :hide-required-asterisk="true">
        <el-input type="text" v-model="ruleForm2.name"></el-input>
      </el-form-item>
      <el-form-item label="创建人">
        <el-input type="text" v-model="ruleForm2.createName"></el-input>
      </el-form-item>
      <el-form-item label="性别" class="sex">
        <el-radio-group v-model="ruleForm2.sex">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="咨询大夫">
        <el-input type="text" v-model="ruleForm2.zxdf"></el-input>
      </el-form-item>
      <el-form-item label="病种">
        <el-select v-model="ruleForm2.zhenduan" placeholder="请选择" @change="bzchange">
          <el-option
            v-for="item in bingzhong"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="主治医师">
        <el-cascader
          expand-trigger="hover"
          :options="doctorList"
          v-model="ruleForm2.doctor"
          @change="handleChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="手机" prop="phone">
        <el-input type="text" v-model="ruleForm2.phone"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="ruleForm2.status" placeholder="请选择">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="地区" prop="region">
        <el-cascader
          placeholder="可输入地区名字搜索"
          v-model="ruleForm2.region"
          :options="city"
          filterable
          change-on-select
          ref="citybox"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="资源来源">
        <el-cascader
          expand-trigger="hover"
          :options="webList"
          v-model="ruleForm2.msgsource"
          @change="handleChange1"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="QQ">
        <el-input type="text" v-model="ruleForm2.qq"></el-input>
      </el-form-item>
      <el-form-item label="是否紧急">
        <el-input type="text" v-model="ruleForm2.urgency"></el-input>
      </el-form-item>
      <el-form-item label="微信">
        <el-input type="text" v-model="ruleForm2.weixin"></el-input>
      </el-form-item>
      <el-form-item label="患病部位">
        <el-input type="text" v-model="ruleForm2.buwei"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="ruleForm2.age"></el-input>
      </el-form-item>
      <el-form-item label="第二备案人">
        <el-input v-model="ruleForm2.beianren"></el-input>
      </el-form-item>
      <el-form-item label="症状">
        <el-input v-model="ruleForm2.zz"></el-input>
      </el-form-item>
      <el-form-item label="住院时间">
        <el-input type="text" v-model="ruleForm2.date"></el-input>
      </el-form-item>
      <el-form-item label="患者备注" class="textarea">
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="ruleForm2.textarea"
          resize="none"
          :autosize="{ minRows: 3, maxRows: 6}"
        ></el-input>
      </el-form-item>
      <el-form-item class="btn">
        <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import axios from "axios";
import moment from "moment"
import cookie from "js-cookie"
export default {
  created () {
    this.getCity();
    this.getDoctor();
  },
  //create组件中的离开守卫
  beforeRouteLeave (to, from, next) {
    // 判断是否点击按钮提交，每点击提交按钮提示消息
    if (this.isLeave) {
      let leave = confirm('正在编辑，确定要离开吗？')
      if (leave) {
        next()
      } else {
        next(leave)
      }
    }else{
      next()
    }
  },
  data () {
    var validateName = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("请输入姓名"));
      } else {
        callback();
      }
    };
    var checkRegion = (rule, value, callback) => {
      if (value == null) {
        callback(new Error("请选择地区"));
      } else {
        callback();
      }
    };
    var checkPhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入手机号"));
      }
      setTimeout(() => {
        if (!/((0\d{2,3}-\d{7,8})|(^1[3456789]\d{9}$))$/.test(value)) {
          callback(new Error("请输入座机号或者手机号"));
        } else {
          callback();
        }
      }, 500);
    };
    return {
      rules2: {
        name: [{ validator: validateName, trigger: "blur" }],
        phone: [{ validator: checkPhone, trigger: "blur" }],
        region: [{ validator: checkRegion, trigger: "blur" }]
      },
      ruleForm2: {
        doctor: ["待定"],
        textarea: "",
        name: `${[
          "赵",
          "钱",
          "孙",
          "李",
          "周",
          "吴",
          "郑",
          "王",
          "冯",
          "陈",
          "褚",
          "卫",
          "蒋",
          "沈",
          "韩",
          "杨",
          "朱",
          "秦",
          "尤",
          "许",
          "何",
          "吕",
          "施",
          "张",
          "孔",
          "曹",
          "严",
          "华",
          "金",
          "魏",
          "陶",
          "姜",
          "戚",
          "谢",
          "邹",
          "喻",
          "柏",
          "水",
          "窦",
          "章",
          "云",
          "苏",
          "潘",
          "葛",
          "奚",
          "范",
          "彭",
          "郎",
          "鲁",
          "韦",
          "昌",
          "马",
          "苗",
          "凤",
          "花",
          "方",
          "俞",
          "任",
          "袁",
          "柳",
          "酆",
          "鲍",
          "史",
          "唐",
          "费",
          "廉",
          "岑",
          "薛",
          "雷",
          "贺",
          "倪",
          "汤",
          "滕",
          "殷",
          "罗",
          "毕",
          "郝",
          "邬",
          "安",
          "常",
          "乐",
          "于",
          "时",
          "傅",
          "皮",
          "卞",
          "齐",
          "康",
          "伍",
          "余",
          "元",
          "卜",
          "顾",
          "孟",
          "平",
          "黄",
          "和",
          "穆",
          "萧",
          "尹"
        ][Math.floor(Math.random() * 101)] +
          [
            "子璇",
            "淼",
            "国栋",
            "夫子",
            "瑞堂",
            "甜",
            "敏",
            "尚",
            "国贤",
            "贺祥",
            "晨涛",
            "昊轩",
            "易轩",
            "益辰",
            "益帆",
            "益冉",
            "瑾春",
            "瑾昆",
            "春齐",
            "杨",
            "文昊",
            "东东",
            "雄霖",
            "浩晨",
            "熙涵",
            "溶溶",
            "冰枫",
            "欣欣",
            "宜豪",
            "欣慧",
            "建政",
            "美欣",
            "淑慧",
            "文轩",
            "文杰",
            "欣源",
            "忠林",
            "榕润",
            "欣汝",
            "慧嘉",
            "新建",
            "建林",
            "亦菲",
            "林",
            "冰洁",
            "佳欣",
            "涵涵",
            "禹辰",
            "淳美",
            "泽惠",
            "伟洋",
            "涵越",
            "润丽",
            "翔",
            "淑华",
            "晶莹",
            "凌晶",
            "苒溪",
            "雨涵",
            "嘉怡",
            "佳毅",
            "子辰",
            "佳琪",
            "紫轩",
            "瑞辰",
            "昕蕊",
            "萌",
            "明远",
            "欣宜",
            "泽远",
            "欣怡",
            "佳怡",
            "佳惠",
            "晨茜",
            "晨璐",
            "运昊",
            "汝鑫",
            "淑君",
            "晶滢",
            "润莎",
            "榕汕",
            "佳钰",
            "佳玉",
            "晓庆",
            "一鸣",
            "语晨",
            "添池",
            "添昊",
            "雨泽",
            "雅晗",
            "雅涵",
            "清妍",
            "诗悦",
            "嘉乐",
            "晨涵",
            "天赫",
            "玥傲",
            "佳昊",
            "天昊",
            "萌萌",
            "若萌"
          ][Math.floor(Math.random() * 50 + 1)]}`,
        createName: cookie.get('username'),
        age: "",
        region: [
          Math.floor(Math.random() * 10 + 1)
        ],
        sex: Math.floor(Math.random() * 2 + 1),
        // zhenduan: "待确诊",
        // 八大病种
        zhenduan: ['待定', '骨髓炎', '股骨头坏死', '糖尿病足', '淋巴结核', '褥疮', '皮肤溃疡', '骨不连', '骨结核'][Math.floor(Math.random() * 8)],
        zxdf: "待定",
        phone: "0311-85376659",
        date: "1970-01-01",
        qq: "",
        // 来源
        // msgsource: ["待定"],
        msgsource: [['网站推广'][0], ['杨欢', '张仕', '张振', '赵晓燕', '李成成'][Math.floor(Math.random() * 4 + 1)], ['手机百度', '百度PC', '神马', '360'][Math.floor(Math.random() * 4)]],
        weixin: "",
        urgency: "否",
        buwei: "",
        createTime: "",
        lastTime: "",
        zz: "",
        beianren: "",
        status: "待确诊"
      },
      city: [],
      // 八大病种
      bingzhong: [],
      // 主治医生
      doctorList: [],
      // 是否有效
      statusList: [],
      // 患者来源
      webList: [],
      isLeave: true
    };
  },
  watch: {},
  methods: {
    getDoctor () {
      axios.get("/static/data/doctor.json").then(res => {
        this.bingzhong = res.data.bingzhong;
        this.doctorList = res.data.doctorList;
        this.statusList = res.data.statusList;
        this.webList = res.data.webList;
      });
    },
    getCity () {
      axios.get("/static/data/city.json").then(res => {
        this.city = res.data.info;
      });
    },
    // 诊断窗口改变成八大病种 资源变成有效
    bzchange () {
      if (
        this.ruleForm2.zhenduan == "待确诊" ||
        this.ruleForm2.zhenduan == "淘汰"
      ) {
        this.ruleForm2.status = "无效";
      } else {
        this.ruleForm2.status = "有效";
      }
    },
    success (msg) {
      this.$message({
        message: msg,
        type: "success"
      });
    },
    fault (msg) {
      this.$message.error(msg);
    },
    handleChange (value) {
      console.log(value);
    },
    handleChange1 (value) {
      console.log(value);
    },
    // 提交员工信息
    submitForm (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var that = this;
          axios.post("api/create", {
            name: that.ruleForm2.name,
            createName: that.ruleForm2.createName,
            age: that.ruleForm2.age,
            sex: that.ruleForm2.sex == 1 ? "男" : "女",
            websource: that.ruleForm2.websource,
            zhenduan: that.ruleForm2.zhenduan,
            zxdf: that.ruleForm2.zxdf,
            phone: that.ruleForm2.phone,
            doctor: that.ruleForm2.doctor.join("/"),
            region: this.$refs.citybox.currentLabels.join("/"),
            regionKey: this.ruleForm2.region,
            date: that.ruleForm2.date,
            qq: that.ruleForm2.qq,
            msgsource: that.ruleForm2.msgsource.join("/"),
            weixin: that.ruleForm2.weixin,
            urgency: that.ruleForm2.urgency,
            buwei: that.ruleForm2.buwei,
            createTime: moment(Date.now()).format('YYYY-MM-DD HH:mm:ss'),
            lastTime: moment(Date.now()).format('YYYY-MM-DD HH:mm:ss'),
            zz: that.ruleForm2.zz,
            beianren: that.ruleForm2.beianren,
            // status: that.ruleForm2.status,
            status: '有效',
            textarea: that.ruleForm2.textarea
          })
            .then(res => {
              if (res.data.status == 0) {
                that.success(res.data.msg);
                that.isLeave = false
                that.$router.push({ path: "/data/state" });
              } else {
                that.fault(res.data.msg);
              }
              console.log(res)
            }).catch(error => {
              console.log(error)
            })
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
form {
  width: 600px;
  display: flex;
  flex-wrap: wrap;

  .el-form-item {
    justify-content: space-around;
    width: 299px;
  }

  .textarea {
    width: 600px;
  }

  .btn {
    width: 100%;
  }
}
</style>

